<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>江南展</title>
    <link href="./css/normalize.css" rel="stylesheet">
    <link href="./css/test.css" rel="stylesheet">
</head>
<body>
<div id="nav">
    <ul>
        <li><img alt="" id="logo" src="./img/logo.png"></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">城市风景</a>
            <ul>
                <li><a href="#">杭州</a></li>
                <li><a href="#">苏州</a></li>
                <li><a href="#">宁波</a></li>
                <li><a href="#">上海</a></li>
                <li><a href="#">南京</a></li>
            </ul>
        </li>
        <li><a href="#">热门景点</a>
            <ul>
                <li><a href="LOGO.html">西湖</a></li>
                <li><a href="#">灵隐寺</a></li>
                <li><a href="#">宋城</a></li>
                <li><a href="#">千岛湖</a></li>
                <li><a href="#">钱塘江</a></li>
            </ul>
        </li>
        <li><a href="#">古韵古镇</a>
            <ul>
                <li><a href="#">周庄</a></li>
                <li><a href="#">同里古镇</a></li>
                <li><a href="#">西塘</a></li>
                <li><a href="#">乌镇</a></li>
                <li><a href="#">南浔</a></li>
            </ul>
        </li>
        <li><a href="#">人文风景</a>
            <ul>
                <li><a href="#">现代服装</a></li>
                <li><a href="#">唐服</a></li>
                <li><a href="#">汉服</a></li>
                <li><a href="#">质朴玩童</a></li>
                <li><a href="#">古稀老人</a></li>
            </ul>
        </li>
        <li><a href="#">关于本站</a></li>
    </ul>
    <div id="icon-list">
        <div id="icon-msg">
            <span id="icon-msg-1">联系我们</span>
            <span id="icon-msg-2">个人中心</span>
            <span id="icon-msg-3">头像</span>
            <span id="icon-msg-4">分享</span>
        </div>
        <li><a href="#"><img alt="" src="./img/联系我们%20(1).png" title="联系我们"></a></li>
        <li><a href="#"><img alt="" src="./img/个人中心.png" title="个人中心"></a></li>
        <li><a href="#"><img alt="" src="./img/个人中心%20(1).png" title="头像"></a></li>
        <li><a href="#"><img alt="" src="./img/分享网站图标.png" title="分享"></a></li>
    </div>
    <input type="button" name="logout" id="logout" value="退出登录" formtarget="_self">
</div>
<p><img alt="" height="400px" src="./img/12.jpeg" width="80%"></p>
<div id="search">
    <label for="search_text"></label><input id="search_text" name="search_text" placeholder="请使用尽量准确的关键词" type="text">
    <input id="search_button" name="search" type="submit" value="搜索">
    <a href="login.html"><input id="search_button1" name="search" type="submit" value="登录"></a>
</div>
<div id="tuijian">
    <ul class="menu">
        <li><a href="#">最新</a></li>
        <li><a href="#">人气</a></li>
        <li><a href="#">点击</a></li>
        <li><a href="#">评论量</a></li>
        <li class="add_delete"><a href="#" id="add" onclick="addPicture();">添加图片</a></li>
        <li class="add_delete"><a href="#" id="delete" onclick="deletePicture();">删除图片</a></li>
    </ul>
</div>
<div id="main">
    <ul id="box">
        <li>
            <a href="#">
                <img alt="" class="preview" src="./img/1.jpeg">
                <img alt="" src="./img/1.jpeg">
            </a>
        </li>
        <li>
            <a href="#">
                <img alt="" class="preview" src="./img/2.jpeg">
                <img alt="" src="./img/2.jpeg">
            </a>
        </li>
        <li>
            <a href="#">
                <img alt="" class="preview" src="./img/3.jpeg">
                <img alt="" src="./img/3.jpeg">
            </a>
        </li>
        <li>
            <a href="#">
                <img alt="" class="preview" src="./img/4.jpeg">
                <img alt="" src="./img/4.jpeg">
            </a>
        </li>
        <li>
            <a href="#">
                <img alt="" class="preview" src="./img/5.jpeg">
                <img alt="" src="./img/5.jpeg">
            </a>
        </li>
        <li>
            <a href="#">
                <img alt="" class="preview" src="./img/6.jpeg">
                <img alt="" src="./img/6.jpeg">
            </a>
        </li>
        <li>
            <a href="#">
                <img alt="" class="preview" src="./img/7.jpeg">
                <img alt="" src="./img/7.jpeg">
            </a>
        </li>
        <li>
            <a href="#">
                <img alt="" class="preview" src="./img/8.jpeg">
                <img alt="" src="./img/8.jpeg">
            </a>
        </li>
        <li>
            <a href="#">
                <img alt="" class="preview" src="./img/9.jpeg">
                <img alt="" src="./img/9.jpeg">
            </a>
        </li>
        <li>
            <a href="#">
                <img alt="" class="preview" src="./img/10.jpeg">
                <img alt="" src="./img/10.jpeg">
            </a>
        </li>
        <li>
            <a href="#">
                <img alt="" class="preview" src="./img/11.jpeg">
                <img alt="" src="./img/11.jpeg">
            </a>
        </li>
        <li>
            <a href="#">
                <img alt="" class="preview" src="./img/12.jpeg">
                <img alt="" src="./img/12.jpeg">
            </a>
        </li>
    </ul>
</div>
<div class="pagecent">
    <a class="handle" href="#">&lt;</a>
    <a class="on" href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">...</a>
    <a class="handle" href="#">&gt;</a>
</div>
<div id="footer">
    <div id="left">
        <h1>江南展</h1>
        <p>
            江南展是一个收集江浙沪地区的各种风景照（包括但不限于城市风景、热门景点的风景和人文照、具有古风和古韵的江南古镇的摄影），并将其展示给用户，是一个收集和展示的平台，本站使用html+css+JavaScript来构成，未采用任何框架和后端服务。用户可以注册登录本站，参与评论和评价，上传相关照片来完善本站，同时也可以下载本站图片。本站的图片均是从网上下载过来的，不涉及任何商业活动，如有侵权，请及时联系我们。 </p>
    </div>
    <div align="center" id="right">
        <p>
            <a href="#">首页</a>-<a href="#" target="_blank">关于我们</a>-<a href="#" target="_blank">联系我们</a>-<a href="#"
                                                                                                            target="_blank">分享我们</a>
        </p>
        <p><span>QQ：3172440451</span></p>
        <p>Copyright &copy;2015-2021 cger.com all right reserved.</p>
        <a href="https://beian.miit.gov.cn" target="_blank">苏ICP备20027715号-1</a> 数据库查询次数：7
    </div>
</div>
<div id="shangxia2">
  <span id="gotop1">
    <img alt="返回顶部小火箭" src="img/huojian.svg">
  </span>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script src="https://cdn.bootcss.com/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdn.bootcss.com/gsap/1.19.0/plugins/ScrollToPlugin.min.js"></script>
<script type="text/javascript">
    /* 选择你喜欢的速度类型，复制下面的某段代码即可。不明处请咨询：qpjk.cc */
    $(function () {

        // 默认速度
        $("#gotop1").click(function () {
            TweenMax.to(window, 1, {scrollTo: 0});
        });


    });

    function addPicture() {
        $('#box').append("<li>" + "<a href='#'>" + "<img class='preview' src='./img/8.jpeg' alt=''>" + "<img src='./img/8.jpeg' alt=''>" + "</a>" + "</li>");
    }

    function deletePicture() {
        $('#box').children('li').last().remove();
    }
    $('#logout').click(function () {
        let flag=confirm("是否退出?");
        if (flag ===true){
            //根据实际情况来判断是否要将cookies删除
            Cookies.remove("remember");
            Cookies.remove("userName");
            Cookies.remove("userPW");
            alert("退出成功!");
            window.location.href = 'login.html'
        }
    });
</script>
</body>
</html>